/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from 'react';
import { DatePicker, Input, Popconfirm, Space } from 'antd';
import { valueEnum1, options, optionsUrls, optionsTypes } from './config';
import { handleDisable, handleCollection } from '../utils';
import moment from 'moment';

const { RangePicker } = DatePicker;

const yesterday = moment().subtract(1, 'days');
const KbRangePicker = ({ setDates, dates }: any) => {
  const disabledDate = (current: any) => {
    if (!dates || dates.length === 0) {
      if (current) return current > moment().subtract(1, 'days');
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 6;
    const tooEarly = (dates[1] && dates[1].diff(current, 'days') > 6) || current > yesterday;
    return tooEarly || tooLate;
  };

  return (
    <RangePicker
      placeholder={['开始时间', '结束时间']}
      disabledDate={disabledDate}
      onCalendarChange={(val: any) => setDates(val)}
      format='YYYY-MM-DD'
      defaultValue={[yesterday, yesterday]}
    />
  );
};

const SignInRender = () => {
  return <Input placeholder='请输入id/手机号/名称'></Input>;
};

const signRender = (quantity: any, per: number) => {
  const hasValue = !/-/.test(quantity);
  const percentage = [0, 97, 100];
  const isHeightThan = +quantity < percentage[per];
  return hasValue ? <span style={isHeightThan ? { color: 'red' } : {}}>{quantity}%</span> : '-';
};

const optionsRender = (data: any, option: number, actionRef: any, brand: string) => {
  const title = [
    '禁用该驿站入库功能？',
    `您将关闭该驿站${data.brand_cn}品牌驿站代收功能，且7天内不可再次开通，是否继续？`,
    '禁用该驿站登录？',
  ];
  const status = ['is_pass', 'is_open_collect', 'is_disable'];
  const isOpened = option == 2 ? !data[status[option]] : data[status[option]];
  return isOpened ? (
    <Popconfirm
      title={title[option]}
      onConfirm={() => handleDisable({ cm_id: data.cm_id, options: option, brand, actionRef })}
      okText={!option ? '继续' : '是'}
      cancelText={!option ? '取消' : '否'}
    >
      <a>禁用</a>
    </Popconfirm>
  ) : (
    '已禁用'
  );
};

const useColumns = (
  actionRef: any,
  { setBrand, setRateType, setSearchDate, setKeyWords }: any,
  brand: string,
  brandList: any,
) => {
  const [dates, setDates] = useState([null, yesterday]);
  return [
    {
      title: '品牌：',
      dataIndex: 'brand',
      valueType: 'radioButton',
      initialValue: 'yt',
      hideInTable: true,
      width: 200,
      colSize: 8,
      valueEnum: brandList,
      fieldProps: {
        onChange: (e: any) => setBrand(e.target.value),
      },
    },
    {
      title: '指标：',
      dataIndex: 'rate_type',
      valueType: 'radioButton',
      initialValue: '1',
      hideInTable: true,
      width: 200,
      colSize: 8,
      valueEnum: valueEnum1,
      fieldProps: {
        onChange: (e: any) => setRateType(e.target.value),
      },
    },
    {
      title: '日期',
      hideInTable: true,
      dataIndex: 'date',
      renderFormItem: () => KbRangePicker({ dates, setDates }),
      fieldProps: {
        onChange: (e: any) =>
          e
            ? setSearchDate(e.map((item: any) => moment(item).format('YYYY-MM-DD')))
            : setSearchDate([]),
      },
    },
    {
      title: '关键词',
      hideInTable: true,
      dataIndex: 'keywords',
      renderFormItem: () => SignInRender(),
      fieldProps: {
        onChange: (e: any) => setKeyWords(e.target.value),
      },
    },
    {
      title: '驿站id',
      dataIndex: 'cm_id',
      align: 'center',
      search: false,
    },
    {
      title: '驿站名称',
      dataIndex: 'inn_name',
      align: 'center',
      search: false,
    },
    {
      title: '驿站账号',
      dataIndex: 'phone',
      align: 'center',
      search: false,
    },
    {
      title: '联系电话',
      dataIndex: 'concat_phone',
      align: 'center',
      search: false,
    },
    {
      title: '入库日期',
      dataIndex: 'in_storage_date',
      align: 'center',
      search: false,
    },
    {
      title: '1日',
      dataIndex: 'rate_one',
      align: 'center',
      search: false,
      render: (_) => signRender(_, 0),
    },
    {
      title: '3日',
      dataIndex: 'rate_three',
      align: 'center',
      search: false,
      render: (_) => signRender(_, 1),
    },
    {
      title: '7日',
      dataIndex: 'rate_seven',
      align: 'center',
      search: false,
      render: (_) => signRender(_, 2),
    },
    {
      title: '代收',
      dataIndex: 'is_pass',
      align: 'center',
      search: false,
      render: (_, data) => {
        const { is_open_collect, brand_cn, cm_id, phone } = data;
        if (is_open_collect == 0) {
          return (
            <Space direction='vertical'>
              <span>已禁用</span>
              <Popconfirm
                title='开启后，该驿站可重新开通该品牌驿站代收，是否继续'
                onConfirm={handleCollection.bind(null, {
                  is_close: 3,
                  phone,
                  cm_id,
                  brand,
                  actionRef,
                })}
              >
                <a>开启</a>
              </Popconfirm>
            </Space>
          );
        } else if (is_open_collect == 1) {
          return (
            <Space direction='vertical'>
              <span>状态正常</span>
              <Popconfirm
                title={`您将关闭该驿站${brand_cn}品牌驿站代收功能，且驿站不能重新开通，是否继续？`}
                onConfirm={handleCollection.bind(null, {
                  is_close: 2,
                  phone,
                  cm_id,
                  brand,
                  actionRef,
                })}
              >
                <a>禁用</a>
              </Popconfirm>
            </Space>
          );
        } else if (is_open_collect == 2) {
          return (
            <Space direction='vertical'>
              <span>已驳回</span>
              <Popconfirm
                title='确认后将清空圆通驿站代收信息，请谨慎使用！'
                onConfirm={handleCollection.bind(null, {
                  is_close: 1,
                  phone,
                  cm_id,
                  brand,
                  actionRef,
                })}
              >
                <a>清空信息</a>
              </Popconfirm>
            </Space>
          );
        } else if (is_open_collect == 3) {
          return <span style={{ color: 'red' }}>开通仍驳回</span>;
        } else {
          return <span>未知状态</span>;
        }
      },
    },
    {
      title: '入库',
      dataIndex: 'is_open_collect',
      align: 'center',
      search: false,
      render: (_, data) => {
        return optionsRender(data, 0, actionRef, brand);
      },
    },
    {
      title: '登录',
      dataIndex: 'is_disable',
      align: 'center',
      search: false,
      render: (_, data) => {
        return optionsRender(data, 2, actionRef, brand);
      },
    },
  ];
};
export { useColumns, options, optionsUrls, optionsTypes };
